<template>
	<view class="wrapper">
		<view class="inner">
			<view class="left">
				<!-- 卡券奖品 -->
				<view v-if="awardInfo.awardType === 0" class="coupon">
					<view><text>￥</text>{{ numberUtil.computeNumber(awardInfo.awardPrice,"/",100).toFloatNumber(2) }}</view>
					<view>满{{ numberUtil.computeNumber(awardInfo.payAmount,"/",100).toFloatNumber(2) }}元可用</view>
				</view>
				<!-- 实物奖品 -->
				<image v-else-if="awardInfo.awardType === 1" :src="awardInfo.awardImg" mode="heightFix"></image>
				<!-- 福分奖品 -->
				<view v-else-if="awardInfo.awardType === 3" class="score">
					{{ awardInfo.awardPrice }}
				</view>
			</view>
			<view class="middle">
				<view class="title">{{ awardInfo.awardName }}</view>
				<view class="desc">{{ awardInfo.payAmount ? `满${numberUtil.computeNumber(awardInfo.payAmount,"/",100).toFloatNumber(2)}元可用` : awardInfo.awardName }}</view>
				<view class="score">
					花费<text>{{ awardInfo.exchangeShareNum }}</text>积分可兑换
				</view>
			</view>
			<view class="right">
				<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cefa00c2-d5ce-43bc-b792-427c108ad0b3.png" mode="widthFix" @click="emits('clickHandle',awardInfo)"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import numberUtil from '@/util/numberUtil.js'
	
	const props = defineProps({
		awardInfo:{
			type: Object,
			default: {}
		}
	})
	
	const emits = defineEmits(['clickHandle'])
	
	// function onClick(){
	// 	emits('clickHandle',awardInfo)
	// }
	
</script>

<style lang="less" scoped>
	.wrapper{
		background-color: #FFF6DB;
		padding: 25rpx 20rpx;
		border-radius: 10rpx;
		
		.inner{
			display: flex;
			align-items: center;
			gap: 20rpx;
			
			.left{
				flex-shrink: 0;
				min-width: 110rpx;
				
				.coupon{
					width: 110rpx;
					height: 100rpx;
					background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/9b11441b-1545-4e1a-93a3-7b1f75b4ebf1.png') no-repeat left top / 100% 100%;
					
					view{
						color: #FE4110;
						&:nth-child(1){
							padding-top: 8rpx;
							font-size: 28rpx;
							text{
								font-size: 16rpx;
							}
						}
						
						&:nth-child(2){
							padding-top: 4rpx;
							padding-left: 5rpx;
							font-size: 10rpx;
						}
					}
				}
				
				
				
				.score{
					width: 100rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 32rpx;
					color: #fff;
					background: url('@/static/new/blessingPoints/score-bg.png') no-repeat left top / 100% 100%;
				}
				
				image{
					height: 80rpx;
				}
			}
			
			.middle{
				flex-grow: 1;
				text-align: left;
				.title{
					color: #F1AF5A;
					font-weight: 500;
					font-size: 36rpx;
				}
				.desc{
					font-size: 28rpx;
				}
				.score{
					font-size: 28rpx;
					text{
						color: #F1AF5A;
					}
				}
			}
			
			.right{
				flex-shrink: 0;
				width: 88rpx;
			}
		}
	}
</style>